<template>
	<div>
		<div class="pl-6 pr-6 pt-6">
			<el-card class="!border-none p-4" shadow="never">
				<div class="topTitle font-bold main-color text-2xl mb-5">
					咨询信息
				</div>
				<el-form class="ls-form el-set-form" :model="formData" inline>
					<el-form-item label="联系工程师">
						<el-select class="w-[280px]" v-model="formData.type" placeholder="请选择">
							<el-option v-for="(item, index) in visitType" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="机型">
						<el-radio-group v-model="radio" >
							<el-radio label="1" size="large">询价单</el-radio>
							<el-radio label="2" size="large">咨询单</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card class="!border-none p-4 mt-[20px]" shadow="never">
				<div class="topTitle font-bold main-color text-2xl mb-5">
					产品信息
				</div>
				<el-table class="mt-[20px]" size="large" :data="lists"
					:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
					:cell-style="{'color':'#0054A6','padding':'20px 0'}">
					<el-table-column label="产品图片" prop="scene_name" align="center">
						<template #default="{ row }">
							<el-image style="width: 48px; height: 48px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
						</template>
					</el-table-column>
					<el-table-column label="产品名称" prop="AAAAAAAA" align="center" />
					<el-table-column label="产品型号" prop="SJD-880" align="center"/>
					<el-table-column label="产品价格" prop="$12900" align="center" />
					<el-table-column label="需求数量" prop="32" align="center" width="100px"/>
					<el-table-column label="操作" fixed="right" align="center">
						<template #default="{ row }">
							<el-button type="primary" link >
								<router-link :to="{
								        path: getRoutePath('InquiryManagement.InquiryManagement/quotation'),
								        query: {
								            id: '1'
								        }
								    }">
									<span class="main-color1">报价</span>
								</router-link>
							</el-button>
							<el-button type="primary" link >
								<span class="main-color1">查看报价</span>
							</el-button>
							<el-button type="primary" link >
								<span class="main-color1">修改报价</span>
							</el-button>
							<el-button type="primary" link >
								<router-link :to="{
								        path: getRoutePath('permission.permission/UpdateRecords'),
								        query: {
								            id: '1'
								        }
								    }">
									<span class="main-color1">历史报价</span>
								</router-link>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
			<el-card class="!border-none p-4 mt-[20px]" shadow="never">
				<div class="topTitle font-bold main-color text-2xl mb-5">
					销售创建订单审核信息
				</div>
				<div class="main-color v-flex v-col-top v-wordBreak">
					<span class="w-[100px] text-right">审核结果：</span>
					<span>审核通过</span>
				</div>
				<div class="main-color v-flex v-col-top v-wordBreak mt-[20px]">
					<span class="w-[100px] text-right">原因：</span>
					<span>这里是审核通过原因具体内容</span>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const formData = reactive({
		Number: '',
		type: '',
	})
	// 产品分类
	const visitType = ref<Array<any>>([
		{
			label: '反击破配件',
			value: '1'
		},
		{
			label: '鄂破配件',
			value: '2'
		},
	])
	const radio = ref('1')
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	

	.el-col {
		border-radius: 4px;
	}
	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
</style>